<template>
  <view class="mcar-view">
    <view class="mcar-view-fl">
      <view class="day">{{ new Date(circle.day * 1000).getDate() }}</view>
      <view class="month">
        {{ new Date(circle.day * 1000).getMonth() + 1 }}月
      </view>
    </view>
    <view class="mcar-view-fr">
      <view
        v-for="item in circle.list"
        :key="item.content_id"
        @tap="() => toDetail(item.content_id)"
      >
        <view v-if="item.imgs.length" class="view-fr-bg">
          <view class="view-fr-img">
            <image :src="item.imgs[0]" mode="aspectFill" />
          </view>
          <view class="view-fr-txt">
            {{ item.content }}
          </view>
        </view>
        <block v-else>
          <view class="view-txt">
            {{ item.content }}
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import { navigateTo } from '@utils/index'

export default {
  name: 'PersonItem',
  props: {
    circle: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  computed: {},
  methods: {
    toDetail(id) {
      navigateTo('circle/detail', {
        id
      })
    }
  }
}
</script>

<style>
.mcar-view {
  margin-bottom: 1.2rem;
  overflow: hidden;
}
.mcar-view .mcar-view-fl {
  float: left;
  width: 20%;
}
.mcar-view .mcar-view-fl .day {
  display: inline-block;
  font-size: 1.65rem;
  font-weight: bold;
}
.mcar-view .mcar-view-fl .month {
  display: inline-block;
  font-size: 0.965rem;
  font-weight: bold;
}
.mcar-view .mcar-view-fr {
  margin-left: 20%;
}
.view-fr-img {
  width: 120rpx;
  height: 120rpx;
  float: left;
}
.view-fr-img image {
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
}
.view-fr-bg {
  margin-bottom: 0.8rem;
  background: rgba(216, 216, 216, 0.15);
  overflow: hidden;
  padding: 0.8rem;
  border-radius: 0.4rem;
}
.view-fr-txt {
  margin-left: 140rpx;
  font-size: 0.965rem;
  line-height: 40rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
}
.view-txt {
  font-size: 0.965rem;
  line-height: 40rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  margin-bottom: 0.8rem;
  background: rgba(216, 216, 216, 0.15);
  padding: 0.8rem;
  border-radius: 0.4rem;
}
</style>
